<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
        }

        .box {
            width: 800px;
            height: 600px;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            border: 3px solid rgba(197, 190, 190, 0.373);
        }

        .box .item {
            box-sizing: border-box;
            width: 23%;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .box .item img {
            width: 100%;
        }

        .box .item button {
            width: 90px;
            height: 30px;
            background-color: red;
            text-align: center;
            line-height: 30px;
            margin-left: 20px;
            font-size: 12px;
            color: white;
            margin-bottom: 20px;
        }

        .item h6 {
            margin-left: 30px;
            font-size: 14px;
        }

        .box2 {
            width: 400px;
            height: 600px;
            margin-left: 20px;
            display: flex;
            flex-direction: column;
            overflow: scroll;
            border: 3px solid rgba(197, 190, 190, 0.373);
        }

        .box2 p {
            margin-left: 10px;
            padding-top: 10px;
            font-weight: 800;
        }

        .box2 .minBox {
            margin-top: 10px;
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-around;
        }

        .box2 .minBox .tupian {
            width: 100px;
            text-align: center;
        }

        .box2 .minBox .tupian img {
            width: 100%;
        }

        button {
            border: none;
            background-color: white;
        }

        .box3 button:nth-of-type(2),
        .box3 button:nth-of-type(4) {
            width: 20px;
            height: 20px;
            font-size: 18px;
            background-color: red;
            color: white;
        }

        .box4 {
            background-color: gray;
            color: white;
            width: 200px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            border-radius: 15px;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <div class="item">
            <img src="https://img.zcool.cn/community/012f045b1a7495a80121bbec67b611.jpg@1280w_1l_2o_100sh.jpg" alt="">
            <span>按摩椅</span>
            <span>1000</span>
            <button>加入购物车</button>
        </div> -->
    </div>

    <div class="box2">
        <p>购物车(<span></span>)</p>
        <div class="box3">
            <!-- <div class="item">
            <div class="minBox">
                <input type="checkbox" name="" id="">
                <div class="tupian">
                    <img src="https://img.zcool.cn/community/012f045b1a7495a80121bbec67b611.jpg@1280w_1l_2o_100sh.jpg"
                        alt="">
                    <span>电动按摩椅</span>
                </div>
                <button>10</button>
                <button>1</button>
                <button>删除收藏</button>
            </div>
        </div> -->
        </div>
        <div class="box4">总计:¥(<span></span>)</div>
    </div>
</body>

</html>
<script>

    //商品列表
    var shop = [{ pic: 'https://img.zcool.cn/community/012f045b1a7495a80121bbec67b611.jpg@1280w_1l_2o_100sh.jpg', name: '高级办公椅', price: '1000', count: 1 },
    { pic: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xPSfW3SqF1KYSdfb1Us1LgHaG1?w=185&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', name: '高级按摩椅', price: '10', count: 1 },
    { pic: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xPSfW3SqF1KYSdfb1Us1LgHaG1?w=185&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', name: '电动按摩椅', price: '200', count: 1 },
    { pic: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xPSfW3SqF1KYSdfb1Us1LgHaG1?w=185&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', name: '高级电动按摩椅', price: '1000', count: 2 },
    { pic: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xPSfW3SqF1KYSdfb1Us1LgHaG1?w=185&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', name: '老板椅', price: '100', count: 1 },
    { pic: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.xPSfW3SqF1KYSdfb1Us1LgHaG1?w=185&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7', name: '办公桌', price: '1000', count: 1 },
    { pic: 'https://img.zcool.cn/community/012f045b1a7495a80121bbec67b611.jpg@1280w_1l_2o_100sh.jpg', name: '可升降办公椅', price: '1000', count: 1 },
    { pic: 'https://img.zcool.cn/community/012f045b1a7495a80121bbec67b611.jpg@1280w_1l_2o_100sh.jpg', name: '可升降办公桌', price: '100', count: 1 },]

    //购物车列表
    var goodList = { list: [] }
    //渲染商品列表
    function rendershop() {
        //获取到要渲染商品列表的盒子
        var shopEle = document.querySelector('.box')
        shopEle.innerHTML = shop.map((item, index) => {
            return `
            <div class="item">
                <img src="${item.pic}" alt="">
                <h6>${item.name}</h6>
                <h6>${item.price}</h6>
                <button>加入购物车</button>
            </div>
            `
        }).join('')
    }

    function renderGouwuche() {
        var box2Ele = document.querySelector('.box3')
        box2Ele.innerHTML = goodList.list.map((item) => {
            // console.log(goodList);
            return `
            <div class="item">
            <div class="minBox">
                <input type="checkbox" name="" id="">
                <div class="tupian">
                    <img src="${item.pic}" alt="">
                    <span>${item.name}</span>
                </div>
                <button>${item.price}</button>
                <button>+</button>
                <button>${item.count}</button>
                <button>-</button>
                <button>删除收藏</button>
                </div>
            </div> 
            `
        }).join('')
        // console.log(str1);
    }
    rendershop()
    //由于渲染的不能绑定事件,所以就给他的父级绑定
    var boxEle = document.querySelector('.box');

    //添加点击事件
    boxEle.onclick = function (e) {
        if (e.target.tagName == 'BUTTON') {
            //获取点击商品的下标
            var btns = [...document.querySelectorAll('.box button')]
            var index = btns.findIndex((item) => {
                return item == e.target;
            })
            //添加商品数据到 购物车数组
            goodList.list.push(shop[index]);
            //重新渲染购物车列表
            renderGouwuche();
            // goodList.list.pop();
            // console.log(goodList.list);

            //渲染商品数量
            var count = 0;
            goodList.list.forEach((item) => {
                count += item.count
            })
            document.querySelector('.box2 p span').innerText = `${count}`

            //渲染+号
            document.querySelector('.box3').onclick = (e) => {
                if(e.target.className =='jia'){
                    var count = goodList.list.map((item) => {
                    return item.count++
                });
                console.log('点击了');
                document.querySelector('.box3 button:nth-of-type(3)').innerHTML = `${count}`
                }
                
            }
            //渲染总价
            const div4Ele = document.querySelector('.box4 span')
            var price = goodList.list.reduce((prev, item) => {
                return prev + item.count * item.price
            }, 0);
            console.log(price);
            div4Ele.innerHTML = `${price}`

            
        }
    }

    // var newGoodlist = new Proxy(goodList,{
    //         set:(a,b,c)=>{
    //             console.log('set');
    //             renderGouwuche();
    //         } ,
    //         get:(a,b,c)=>{ console.log('获取了对象',a,b,c) }
    //     })

</script>